<template>
    <div class="isbox">
        <input type="text" placeholder="添加你的愿望清单...." v-model="msg"  @keydown.enter="addlist">
        <button @click="addlist">提交</button>
    </div>
    <list :arr="newData" @del="delto" @get="getFlag" :activeCount="activeCount" :allCount="allCount" :completedCount="completedCount"></list>
</template>



<script setup>
import list from "../components/list.vue"
import { computed, ref } from "vue"

let local = {
    get(key){
        return JSON.parse(localStorage.getItem(key))
    },
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value))
    }
}

let msg = ref('')
let arr = ref(
    local.get('data')??[
    {
        id:1,
        lists:"cnm",
        isFlag:false
    },
    {
        id:2,
        lists:"fakey",
        isFlag:true
    }
])

let addlist = ()=>{
    let obj={
        id: Math.random().toString(32).substring(2),
        lists:msg.value,
        isFlag:false
    }

    arr.value.push(obj)
    msg.value=""
    local.set('data',arr.value)
}

let delto = input =>{
    arr.value.splice(input,1)
    local.set('data',arr.value)
}

let filterData = ref('all')
let getFlag = flag=>{
    filterData.value = flag
}

let allCount = ref(0)
let completedCount = ref(0)
let activeCount = ref(0)

let newData = computed(()=>{
    let all = arr.value
    let completed = arr.value.filter(item=>item.isFlag)
    let active = arr.value.filter(item=>!item.isFlag)

     allCount.value = all.length
     console.log(all.length);
     completedCount.value = completed.length
     activeCount.value = active.length
    switch(filterData.value){

        case "all":
            return all
        case "completed":
            return completed
        case "active":
            return active
    }       
})
</script>




<style scoped>
.isbox {
    width: 440px;
   
    /* background-color: blue; */
    position: relative;
    left: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

input {
    border: none;
    border-bottom: dashed pink;
    margin-right: 6px;
    outline: none;
    font-size: 16px;
    padding: 5px;
    background-color: #f2f2f2;
}

button {
    width: 80px;
    height: 30px;
    border-radius: 15px;
    transform: rotate(3deg);
    background-color: pink;
    cursor: pointer;
}
</style>